<template>
  <div>
    <div class="pad-20">
      <div style="text-align: center; font-size: 40px">
        <p v-if="entity.type === 0">{{ entity.transactionTime | dateFilter }} 对账单</p>
        <p v-if="entity.type === 1">{{ dateTime }} 对账单</p>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table :data="entityList" @selection-change="handleSelectionChange" v-loading="listLoading"
                  element-loading-text="加载中" style="width: 100%">
          <el-table-column  label="时间" align="center" width="200px">
            <template slot-scope="scope">
              <template v-if="entity.type === 0">
                {{ scope.row.transactionTime }}
              </template>
              <template v-if="entity.type === 1">
                {{ scope.row.transactionTime | dateFilter }}
              </template>
            </template>
          </el-table-column>
          <el-table-column  label="收入(元)" align="center">
            <template slot-scope="scope">
              <div style="float: left; width: 50%; text-align: center; height: 100%; background-color: #F9F9F9">
                <span v-if="scope.row.rechargeAmount !== '0.00'">{{incomeExpenseTypes[ scope.row.incomeExpenseType]}}</span>
              </div>
              <div style="float: right; width: 50%; text-align: center">
                <span style="color: green">+{{ scope.row.rechargeAmount}}</span>
                <div v-if="scope.row.orderNo && scope.row.rechargeAmount * 1 > 0">(订单号： {{scope.row.orderNo}})</div>
                <div v-if="scope.row.nickname && scope.row.rechargeAmount * 1 > 0">微客： {{scope.row.nickname}}</div>
                <div v-if="scope.row.storeName && scope.row.rechargeAmount * 1 > 0">门店： {{scope.row.storeName}}</div>
                <div v-if="scope.row.commanderName && scope.row.rechargeAmount * 1 > 0">团长： {{scope.row.commanderName}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column  label="支出(元)" align="center">
            <template slot-scope="scope">
              <div style="float: left; width: 50%; text-align: center; height: 100%; background-color: #F9F9F9">
                <span v-if="scope.row.expenditureAmount !== '0.00'">{{incomeExpenseTypes[ scope.row.incomeExpenseType]}}</span>
              </div>
              <div style="float: right; width: 50%; text-align: center">
                <span style="color: red">-{{ scope.row.expenditureAmount}}</span>
                <div v-if="scope.row.orderNo && scope.row.expenditureAmount * 1 > 0">(订单号： {{scope.row.orderNo}})</div>
                <div v-if="scope.row.nickname && scope.row.expenditureAmount * 1 > 0">微客： {{scope.row.nickname}}</div>
                <div v-if="scope.row.storeName && scope.row.rechargeAmount * 1 > 0">门店： {{scope.row.storeName}}</div>
                <div v-if="scope.row.commanderName && scope.row.rechargeAmount * 1 > 0">团长： {{scope.row.commanderName}}</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="entityListQuery.currentPage"
                       :page-sizes="[10, 20, 50, 100]" :page-size="entityListQuery.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { pagingFinaceAccountStatement, pagingIncomeExpenseByFinacec } from '@/api/finace/finaceAccountStatement'
  import { getToken } from '@/utils/auth'
  import { formatTimeToDate, formatTimeToDateByType } from '@/api/common/date'
  import { getDictByGroupName } from '@/api/common/common'
  export default {
    data() {
      return {
        entity: '',
        dateTime: '',
        incomeExpenseTypes: [],
        entityListQuery: {
          currentPage: 1,
          size: 10,
          enterpriseId: this.getEnterpriseId()
        },
        entityList: [],
        listLoading: true,
        multipleSelection: [],
        total: null
      }
    },
    created() {
      const queryParams = this.getCurrentPage().query
      if (queryParams && queryParams.entity) {
        this.entity = queryParams.entity
      }
      if (queryParams && queryParams.dateTime) {
        if (queryParams.type * 1 === 1) {
          this.dateTime = formatTimeToDateByType(queryParams.dateTime, 'month')
        } else {
          this.dateTime = formatTimeToDateByType(queryParams.dateTime)
        }
      }
      this.token = { accessToken: getToken() }
      this.initIncomeType()
    },
    filters: {
      dateFilter(e) {
        if (e != null) {
          const date = formatTimeToDate(e)
          return date
        }
        return e
      },
      dateFilterType(e, type) {
        if (e != null) {
          const date = formatTimeToDateByType(e, type)
          return date
        }
        return e
      }
    },
    methods: {
      initIncomeType() {
        getDictByGroupName('EnterpriseIncomeExpenseDTO.incomeExpenseType').then(response => {
          if (response.isError) return
          this.incomeExpenseTypes = response.data.incomeExpenseType
          this.initPage()
        })
      },
      initPage() {
        this.entityListQuery.dateTime = this.dateTime
        if (this.entity.type === 1) {
          this.entityListQuery.type = '0'
          pagingFinaceAccountStatement(this.entityListQuery).then(response => {
            if (response.isError) return
            this.entityList = response.data.records
            this.total = response.data.total
            this.listLoading = false
          })
        } else {
          pagingIncomeExpenseByFinacec(this.entityListQuery).then(response => {
            if (response.isError) return
            this.entityList = response.data.records
            this.total = response.data.total
            this.listLoading = false
          })
        }
      },
      handleClick() {
        this.reset()
      },
      handleSearch() {
        this.initPage()
      },
      reset() {
        this.entityListQuery = {
          currentPage: 1,
          size: 10,
          enterpriseId: this.getEnterpriseId()
        }
        this.initPage()
      },
      rechargeClick() {
        this.financeVisible = true
      },
      handleSizeChange(val) {
        this.entityListQuery.size = val
        this.initPage()
      },
      handleCurrentChange(val) {
        this.entityListQuery.currentPage = val
        this.initPage()
      },
      // 勾选
      handleSelectionChange(val) {
        this.multipleSelection = val
      }
    }
  }
</script>
<style scoped>
  .table-container >>> .el-table__row .cell{
    padding: 0;
    height: 100px;
    line-height: 30px;
  }
  .table-container >>> .el-table__row td{
  padding: 0 !important;
  }

</style>